<template>
  <a-form-item v-if="field.type !== 'divider'" :label="field.label" :name="field.name">

    <a-input v-if="field.type === 'input'" v-model:value="model" :placeholder="field.placeholder"
             :disabled="field.disabled" :default-value="field.defaultValue"
             :allow-clear="field.allowClear" :type="field.type ? field.type:'input'"
             :maxlength="field.maxlength"/>

    <a-textarea v-if="field.type === 'textarea'" v-model:value="model"
                :placeholder="field.placeholder" :disabled="field.disabled"
                :allow-clear="field.allowClear" :autoSize="{minRows: 5}"/>

    <a-input-number v-if="field.type === 'number'" v-model:value="model"
                    :default-value="field.defaultValue" :min="field.min" :max="field.max"
                    :formatter="field.formatter" :precision="field.precision"
                    :step="field.step" style="width: 100%"/>
    <template v-if="field.type === 'select'">
      <a-select v-if="field.mode === 'default'" v-model:value="model"
                :disabled="field.disabled" :placeholder="field.placeholder" :default-value="field.defaultValue"
                :allow-clear="field.allowClear" :maxTagCount="field.maxTagCount">
        <a-select-option v-for="option in options" :value="option[field.valueKey ? field.valueKey : 'value']">
          {{ option[field.labelKey ? field.labelKey : 'label'] }}
        </a-select-option>
      </a-select>
      <a-select v-else v-model:value="model" :disabled="field.disabled" :placeholder="field.placeholder"
                :default-value="field.defaultValue" :allow-clear="field.allowClear" :mode="field.mode"
                :maxTagCount="field.maxTagCount">
        <a-select-option v-for="option in options" :value="option[field.valueKey ? field.valueKey : 'value']"
        >
          {{ option[field.labelKey ? field.labelKey : 'label'] }}
        </a-select-option>
      </a-select>
    </template>

    <a-cascader v-if="field.type === 'cascader'" v-model:value="model" :disabled="field.disabled"
                :options="options" :placeholder="field.placeholder" :default-value="field.defaultValue"
                :allow-clear="field.allowClear"/>

    <a-date-picker v-if="field.type === 'datepicker'" v-model:value="model" :disabled="field.disabled"
                   :allow-clear="field.allowClear" :default-value="field.defaultValue" :format="field.format"
                   :show-time="field.showTime" style="width: 100%"/>

    <a-range-picker v-if="field.type === 'rangepicker'" v-model:value="model" :default-value="field.defaultValue"
                    :disabled="field.disabled" :allow-clear="field.allowClear" :format="field.format"
                    :value-format="field.valueFormat" :show-time="field.showTime" style="width: 100%"/>

    <a-time-picker v-if="field.type === 'timepicker'" v-model:value="model" :default-value="field.defaultValue"
                   :disabled="field.disabled" :allow-clear="field.allowClear" :format="field.format"
                   :value-format="field.valueFormat" style="width: 100%"/>

    <a-radio-group v-if="field.type === 'radio'" v-model:value="model" :disabled="field.disabled"
                   :default-value="field.defaultValue">
      <a-radio v-for="option in options" :value="option[field.valueKey ? field.valueKey:'value']"
               :disabled="option.disabled">
        {{ option[field.labelKey ? field.labelKey : 'label'] }}
      </a-radio>
    </a-radio-group>

    <a-checkbox-group v-if="field.type === 'checkbox'" v-model:value="model" :disabled="field.disabled"
                      :default-value="field.defaultValue">
      <a-checkbox v-for="option in options" :value="option[field.valueKey ? field.valueKey:'value']"
                  :disabled="option.disabled">
        {{ option[field.labelKey ? field.labelKey : 'label'] }}
      </a-checkbox>
    </a-checkbox-group>

    <a-tree-select v-if="field.type === 'treeselect'" v-model:value="model" :placeholder="field.placeholder"
                   :disabled="field.disabled" :default-value="field.defaultValue" :allow-clear="field.allowClear"
                   :tree-data="options" :tree-checkable="field.multiple" :tree-node-filter-prop="field.valueKey"
                   :tree-label-prop="field.labelKey"/>
  </a-form-item>

  <a-divider v-if="field.type === 'divider'" :orientation="field.orientation">
    {{ field.label }}
  </a-divider>
</template>
<script>
export default {
  name: "FieldRender",
  props: {
    field: {
      type: Object,
      required: true
    },
    value: {
      required: true
    },
    options: {
      type: Array,
    }
  },
  data() {
    return {
      model: this.value,
    };
  },
  watch: {
    'model': {
      handler(newValue, oldValue) {
        this.$emit('update:value', newValue);
      }
    },
    'value': {
      handler(newValue, oldValue) {
        this.model = newValue;
      }
    }
  },
  created() {
  }
}
</script>

<style scoped>
.ant-calendar-picker {
  width: 100% !important;
}
</style>
